<!--
 * @Author: zhuhaohua 250293786@qq.com
 * @Date: 2024-01-02 10:21:51
 * @LastEditors: zhayang 1063975710@qq.com
 * @LastEditTime: 2024-07-04 11:35:57
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 视频管理
-->
<template>
  <div class="app-container fit bg-#fff column relative overflow-hidden">
    <el-tabs
      v-model="activeName"
      class="fit"
    >
      <el-tab-pane
        label="视频"
        name="video"
        class="fit"
      >
        <videoList />
      </el-tab-pane>
      <el-tab-pane
        label="合集"
        name="collection"
        class="fit"
      >
        <collectionList />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import collectionList from './components/collection-list.vue'
import videoList from './components/video-list.vue'

export default {
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.activeName = from?.name === 'series-details' ? 'collection' : 'video'
    })
  },
  components: {
    videoList,
    collectionList
  },
  data() {
    return {
      activeName: 'video'
    }
  },
  created() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
::v-deep {
  .el-tabs__content {
    height: calc(100% - 65px);
  }
  .el-tabs__item {
    width: 104px;
    display: inline-flex;
    justify-content: center;
    font-weight: 600;
    color: #9e9e9e;
    &.is-active {
      color: #39d9c6;
    }
  }
  .el-tabs__active-bar {
    width: 28px !important;
    left: 28px;
    height: 3px;
  }
  .el-tabs__nav-wrap::after {
    display: none;
  }
}
</style>
